<template>
  <div>
    <el-select size="large" @change="afterSelectUser" v-model="val">
      <el-option v-for="item in opts" :key="item.key" :label="item.value" :value="item" />
    </el-select>
  </div>
</template>

<script setup lang="ts">
import { fetchList, delObjs } from "../../../../../api/flow/cardReplace/qrCardReplace";
let opts = ref([])

const val = ref()
let emits = defineEmits(['update:val', 'update:valueKey']);
const afterSelectUser = (e) => {
  //选择人员变化
  emits('update:val', e.value);
  emits('update:valueKey', e.key);
};

let props = defineProps({
  val: {
    type: String,
    default: '',
  }
});
onMounted(() => {
  fetchList().then((res) => {
    if (res?.data?.records) {
      for (const value of res.data.records) {
        // const { name, attribute } = value
        // opts.value.push({ key: String(attribute), value: name })

        const { cardType, id } = value
        opts.value.push({ key: String(id), value: cardType })
        if (cardType === props.val) {
          val.value = { key: String(id), value: cardType }
        }
      }
    }
  })
})
</script>
